<template>
  <div>
    <a-card title="目标高程设置指令（引导信息）">
      <a slot="extra" href="#" @click="showModal">详情</a>
      <a-table :columns="columns" bordered size="small" :data-source="data" :pagination="false"></a-table>
    </a-card>
    <a-modal v-model="visible" title="历史信息" @ok="handleOk" width="60%">
      <a-table :columns="columns" :data-source="dataHistory"></a-table>
    </a-modal>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
import { mapGetters } from 'vuex'
export default {
  name: "KeyTrackingAreas",
  data() {
    const columns = [
      {
        title: '指控车',
        dataIndex: 'commandVehicleName',
        key: 'commandVehicleName',
        customRender: (value, row, index) => {
          const obj = {
            children: value,
            attrs: {},
          }
          obj.attrs.rowSpan = row.commandVehicleNamerowSpan
          return obj
        },

      },
      {
        title: '目标编号',
        dataIndex: 'targetNo',
        key: 'targetNo',
      },
      {
        title: '经度',
        dataIndex: 'targetLongitude',
        key: 'targetLongitude',
      },

      {
        title: '纬度',
        dataIndex: 'targetLatitude',
        key: 'targetLatitude',
      },
      {
        title: '高程',
        dataIndex: 'targetElevation',
        key: 'targetElevation',
      },

      {
        title: '校验结果',
        dataIndex: 'verifyResult_dictText',
        key: 'verifyResult_dictText',
      },


    ];
    const data = [
      //   {
      //   id: null,
      //   createBy: null,
      //   createTime: null,
      //   updateBy: null,
      //   updateTime: null,
      //   sysOrgCode: null,
      //   fightDemandId: null,
      //   commandVehicleId: null,
      //   verifyResult: "NO_PASS",
      //   targetNum: null,
      //   commandVehicleName: "指控车1",
      //   verifyResult_dictText: "不通过",
      //   subGuidanceInfos: [
      //     {
      //       targetElevation: '111',
      //       targetLatitude: '33',
      //       targetLongitude: '000',
      //       targetNo: '1111',
      //     },
      //     {
      //       targetElevation: '0003',
      //       targetLatitude: '33333',
      //       targetLongitude: '21313',
      //       targetNo: '21212',
      //     }
      //   ]
      // }
    ];
    return {
      data,
      columns,
      visible: false,
      dataHistory: [],
      url: {
        list: '/guidanceInfo/nmcMainGuidanceInfo/queryRealTimeList',
        historyList: '/KeyTrackingAreas/historyList'
      }
    };
  },
  computed: {
    ...mapGetters(['websocketMsg']),
    websocketMsg() {
      return this.$store.state.user.websocketMsg
    },
  },
  watch: {
    websocketMsg: {
      handler(val) {
        // 需要进行的操作
        if(val){
          let msg = JSON.parse(val)
          if (msg.cmd === 'RECEIVE_CONTROL_SATELLITE') {
            this.getList();
          }
        }
      },
    },
  },
  activated() {

    this.getList()
    // let propsList = ['commandVehicleName']
    // propsList.map((item) => {
    //   this.data = [...this.changeData(this.data, item)]
    // })
  },
  created() {
    this.getList()
    // let propsList = ['commandVehicleName']
    // propsList.map((item) => {
    //   this.data = [...this.changeData(this.data, item)]
    // })
  },
  methods: {
    changeData(data, field) {
      let count = 0 //重复项的第一项
      let indexCount = 1 //下一项
      while (indexCount < data.length) {
        var item = data.slice(count, count + 1)[0] //获取没有比较的第一个对象
        if (!item[`${field}rowSpan`]) {
          item[`${field}rowSpan`] = 1 //初始化为1
        }
        if (item[field] === data[indexCount][field]) {
          //第一个对象与后面的对象相比，有相同项就累加，并且后面相同项设置为0
          item[`${field}rowSpan`]++
          data[indexCount][`${field}rowSpan`] = 0
        } else {
          count = indexCount
        }
        indexCount++
      }
      return data
    },
    getList() {
      getAction(this.url.list).then(res => {
        if (res.success) {
          this.data = res.result
          let propsList = ['commandVehicleName']
          propsList.map((item) => {
            this.data = [...this.changeData(this.data, item)]
          })
        } else {
          this.$message.error(res.message)
        }
      })
    },

    showModal() {
      this.visible = true;
      getAction(this.url.historyList).then(res => {
        if (res.success) {
          this.dataHistory = res.result.records
        } else {
          this.$message.error(res.message)
        }
      })
    },
    handleOk(e) {
      this.visible = false;
    },
  }
}
</script>

<style>
</style>